<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        var socket;
        if(window.WebSocket) {
            socket = new WebSocket("ws://localhost:8899/ws");

            socket.onmessage = function(event) {
                var ta = document.getElementById("serverText");
                ta.value = ta.value + "\n" + event.data;
            }

            socket.onopen = function(event) {
                var ta = document.getElementById("serverText");
                ta.value = "连接开启！";
            }

            socket.onclose = function(event) {
                var ta = document.getElementById("serverText");
                ta.value = ta.value + "\n" + "连接关闭！";
            }
        }else {
            alert("浏览器不支持WebSocket")
        }

        function sendMessage(messge) {
            if(!window.WebSocket) {
                return;
            }
            if(socket.readyState=WebSocket.OPEN){
                socket.send(messge)
            }else {
                alert("连接尚未开启")
            }
        }

    </script>
</head>
<body>
 <form>
     <textarea style="width: 200px;height: 300px" name="client">

     </textarea>
     <input value="发送" type="button" onclick="sendMessage(this.form.client.value)">

     </br>

     <textarea style="width: 200px;height: 400px" id="serverText">

     </textarea>
     <input value="清除" type="button" onclick="javascript: document.getElementById('serverText').value=''">
 </form>

</body>
</html>